CSS container query uzunlik birliklarini (cqw, cqh, cqi, cqb) o'rganing va turli global dizayn kontekstlarida elementga nisbatan uslub berishdagi kuchini bilib oling.
CSS Container Query uzunligi: Global Dizayn uchun Elementga Nisbatan Birlikni Hisoblashda Ustozlik
Veb-dizaynning doimiy rivojlanib borayotgan manzarasida, haqiqatan ham moslashuvchan va moslashuvchan interfeyslarga erishish har doim asosiy maqsad bo'lib kelgan. vw va vh kabi viewport birliklari bizga o'nlab yillar davomida yaxshi xizmat qilgan bo'lsa-da, ular uslubni to'g'ridan-to'g'ri brauzer oynasiga bog'laydi. Ushbu yondashuv elementlar butun viewportga emas, balki o'zlarining konteyner maydoniga asoslangan holda moslashishi kerak bo'lganda cheklovchi bo'lishi mumkin. CSS Container Queries-ga kiring, bu ishlab chiquvchilarga komponentlarni o'zlarining ota-onalarining o'lchamlari asosida uslublash imkonini beruvchi inqilobiy xususiyat. Ushbu kuchning asosiy tarkibiy qismi uning elementga nisbatan uzunlik birliklarining yangi to'plamida yotadi: cqw, cqh, cqi va cqb. Ushbu keng qamrovli qo'llanma ushbu birliklarni chuqurroq o'rganadi, ularning hisob-kitobini, amaliy qo'llanishlarini va ular haqiqatan ham global va kontekstga mos dizayn uchun qanday ishlatilishi mumkinligini tushuntiradi.
Viewport birliklarining cheklovlari
Container query uzunlik birliklarining o'ziga xos xususiyatlariga sho'ng'ishdan oldin, ularning nima uchun kerakligini tushunish juda muhimdir. Viewport birliklari (vw, vh, vmin, vmax) uzunliklarni viewportning foizi sifatida belgilaydi. Misol uchun, 1vw viewportning kengligining 1% ini va 1vh viewportning balandligining 1% ini tashkil qiladi.
Ushbu birliklar butun joylashuvni moslashuvchan qilish uchun samarali bo'lsa-da, ular individual komponentlarning ehtiyojlarini qondira olmaydi. Misol uchun, shrift hajmi yoki masofani o'zgartirishi kerak bo'lgan navigatsiya paneli o'zining ota-nav elementining kengligiga asoslanadi, brauzer oynasiga emas. Agar navigatsiya qattiq kenglikka ega bo'lgan yon panelga o'rnatilgan bo'lsa, uning shrift hajmi uchun vw dan foydalanish viewport o'zgarganda izchil bo'lmagan va ko'pincha noto'g'ri masshtablashga olib keladi. Komponentning ichki joylashuvi siqilgan yoki haddan tashqari keng bo'lishi mumkin, uning uchun mavjud bo'lgan haqiqiy maydondan qat'iy nazar.
Ushbu cheklov, komponentlar turli xil moslashuvchan tartiblar ichida joylashtirilishi mumkin bo'lgan murakkab, xalqarolashtirilgan UI-larda yoki butun dunyo bo'ylab turli xil ekran o'lchamlari va aspekt nisbatlari bilan ishlashda yanada ko'proq seziladi. Dizaynerlar va ishlab chiquvchilar ko'pincha konteyner o'lchovlarini o'lchash va uslublarni dinamik tarzda qo'llash uchun JavaScript-ga murojaat qilishadi, bu esa unchalik samarali emas va saqlash qiyinroq.
CSS Container Queries va Uzunlik Birliklarini Ta'riflash
@container qoidasi bilan tanishtirilgan CSS Container Queries, bizga uslublarni elementga eng yaqin ajdodi konteyner kontekstiga ega bo'lgan (odatda container-type yoki container ni o'rnatish orqali o'rnatiladi) o'lchamlari asosida qo'llashga imkon beradi. Ushbu paradigma o'zgarishi shuni anglatadiki, endi bizning komponentlarimiz o'zlarining bevosita atrof-muhitiga ta'sir o'tkazishi, moslashuvchan dizayn ustidan yangi darajadagi donador nazoratni ta'minlashi mumkin.
Ushbu konteynerga asoslangan javobgarlikni osonlashtirish uchun yangi uzunlik birliklari to'plami taqdim etildi:
cqw(Konteynerning Kengligi): konteynerning satr o'lchamining 1% i.cqh(Konteynerning Balandligi): konteynerning blok o'lchamining 1% i.cqi(Konteynerning Satr O'lchami):cqwga teng.cqb(Konteynerning Blok O'lchami):cqhga teng.
Ushbu birliklar ularning viewportga nisbatan tengliklariga (vw va vh) o'xshash bo'lish uchun mo'ljallangan, lekin ular viewport o'rniga konteynerning o'lchamlariga nisbatan hisoblanadi.
"Satr" va "Blok" o'lchamini tushunish
"Satr" va "blok" atamalari ushbu yangi birliklarni tushunish uchun asosiy hisoblanadi. Ular CSS Writing Modes Level 3 spesifikatsiyasida ishlatiladigan, yo'nalishdan mustaqil atamalardir:
- Satr O'qi: Matn oqib o'tadigan o'q. Gorizontal yozish rejimlarida (ingliz tilida bo'lgani kabi) bu kenglik. Vertikal yozish rejimlarida (an'anaviy yapon tilida bo'lgani kabi) bu balandlik.
- Blok O'qi: Satr o'qiga perpendikulyar o'q. Gorizontal yozish rejimlarida bu balandlik. Vertikal yozish rejimlarida bu kenglik.
Shuning uchun:
cqi(Konteynerning Satr O'lchami) satr o'qi bo'ylab konteynerning o'lchamining 1% ini bildiradi. Ingliz tili (gorizontal yozish rejimi) uchun bu konteynerning kengligining 1% iga teng.cqb(Konteynerning Blok O'lchami) blok o'qi bo'ylab konteynerning o'lchamining 1% ini bildiradi. Ingliz tili uchun bu konteynerning balandligining 1% iga teng.
Ushbu mavhum atamalarning kiritilishi konteyner query birliklari turli xil yozish rejimlarida va matn yo'nalishlarida izchil ishlashini ta'minlaydi, bu esa kontent turli tillarda va yo'nalishlarda namoyish etilishi mumkin bo'lgan global ilovalar uchun juda muhimdir.
Container Query Uzunlik Birliklarini Hisoblash
Hisoblash oddiy:
1cqw= Konteyner Kengligi / 1001cqh= Konteyner Balandligi / 1001cqi= Konteyner Satr O'lchami / 100 (Gorizontal yozish rejimlarida1cqwga teng)1cqb= Konteyner Blok O'lchami / 100 (Gorizontal yozish rejimlarida1cqhga teng)
Misol bilan ko'rib chiqamiz. Agar konteyner elementi 500 piksel hisoblangan kenglikka va 300 piksel hisoblangan balandlikka ega bo'lsa:
10cqw(500px / 100) * 10 = 50px.25cqh(300px / 100) * 25 = 75px.50cqi(500px / 100) * 50 = 250px.100cqb(300px / 100) * 100 = 300px.
Juda muhimi, bu birliklar dinamikdir. Agar konteynerning o'lchamlari o'zgarib qolsa (masalan, o'lcham o'zgarish hodisasi, yoki joylashuvga ta'sir qiluvchi kontentning qo'shilishi/olib tashlanishi), ushbu birliklarni ishlatadigan har qanday CSS xususiyatlari avtomatik ravishda qayta hisoblanadi va mos ravishda yangilanadi.
Global Dizayn uchun Amaliy Qo'llanilishlar
cqw, cqh, cqi va cqb ning kuchi ularning bevosita kontekstiga javob beradigan yuqori moslashuvchan komponentlarni yaratish qobiliyatida yotadi. Bu xalqaro veb-ishlab chiqish uchun bebahodir.
1. Turli tillar uchun shrift
Turli tillar har xil belgilar kengligi va gap uzunligiga ega. Qisqa ingliz iborasi uchun mukammal ishlaydigan shrift hajmi uzun nemis jumlasi yoki bir xil komponent ichidagi ixcham Sharqiy Osiyo belgisi uchun juda katta yoki juda kichik bo'lishi mumkin. font-size uchun konteyner query birliklaridan foydalanish matnning o'z komponentidagi mavjud gorizontal maydonga qarab chiroyli ko'rinishini ta'minlaydi.
Misol: maqola nomlarini ko'rsatadigan karta komponenti.
.card {
container-type: inline-size;
width: 300px; /* Karta uchun misol qattiq kenglik */
}
.card-title {
font-size: 2.5cqw; /* Shrift hajmi karta kengligi bilan o'lchanadi */
line-height: 1.4;
}
/* Kichikroq kartalar uchun misol query */
@container (max-width: 200px) {
.card-title {
font-size: 3cqw; /* O'qilishi saqlanishi uchun torroq kartalar uchun biroz katta shrift */
}
}
Ushbu ssenariyda, agar .card elementi 300px kenglikka ega bo'lsa, sarlavhaning shrift hajmi 300px dan 2.5% ni tashkil qiladi, bu 7,5px ni tashkil qiladi. Agar karta 200px gacha qisqarsa, shrift hajmi 200px dan 3% ga aylanishi, ya'ni 6px ni tashkil qiladi. Bu matnning o'qilishi va kartaning chegaralari ichida yaxshi mutanosibligini ta'minlaydi, uzoqroq yoki qisqaroq matn tarkibiga chiroyli tarzda moslashadi.
2. Oraliq va joylashuv tuzatishlari
Komponentlar ichidagi to'ldirish, chekka va bo'shliqlar dinamik ravishda sozlanishi mumkin. Bu ayniqsa, navigatsiya menyulari, forma kiritishlari yoki tasvir galereyalari kabi elementlar uchun foydalidir, bu yerda masofa komponentning konteyner kengligiga moslashishi kerak.
Misol: moslashuvchan yon panel ichidagi moslashuvchan navigatsiya menyusi.
.sidebar {
container-type: inline-size;
width: 25%; /* Misol: Yon panel ota-onasining kengligining 25% ini oladi */
}
.nav-link {
padding: 1cqw 1.5cqw; /* To'ldirish yon panelning kengligiga o'lchanadi */
margin-bottom: 1cqw;
}
.nav-icon {
width: 3cqw; /* Ikonka o'lchami yon panelning kengligiga nisbatan */
height: auto;
}
Yon panelning kengligi o'zgarganda (masalan, asosiy kontent maydoni o'zgartirilganligi sababli), navigatsiya havolalaridagi to'ldirish va belgi o'lchamlari avtomatik ravishda sozlanadi va mavjud maydonga nisbatan izchil vizual ierarxiyani saqlab qoladi.
3. Tasvir va OAV aspekt nisbatlari
Aspekt nisbati xususiyatlari va ichki o'lchamlari kuchli bo'lsa-da, ba'zida siz ommaviy axborot vositalarining konteynerning o'lchamlariga bevosita moslashishi kerak, ayniqsa konteynerning o'zi moslashuvchanlikning asosiy haydovchisi bo'lsa.
Misol: konteynerning kengligini to'ldiradigan, lekin o'sha kenglikka nisbatan muayyan aspekt nisbatini saqlaydigan qahramon tasviri.
.hero-section {
container-type: inline-size;
width: 100%;
}
.hero-image {
width: 100%;
height: 50cqh; /* Tasvir balandligi qahramon qismining balandligining 50% ni tashkil qiladi */
object-fit: cover;
}
Bu yerda, 50cqh tasvirning balandligi har doim uning konteynerining balandligining yarmiga teng bo'lishini ta'minlaydi. Agar konteyner baland va tor bo'lsa, tasvir ham shuni aks ettiradi. Agar konteyner qisqa va keng bo'lsa, tasvir ham moslashadi. Bu global jihatdan izchil qahramon bannerlari yoki fon rasmlari uchun juda yaxshi.
4. Murakkab komponentlarni moslashtirish (masalan, ma'lumotlar jadvallari)
Ma'lumotlar jadvallari, ayniqsa, ko'plab ustunlar va turli tillar bilan birga, ularning moslashuvchanligi bilan mashhur muammolarga ega. Container query birliklari ustun kengliklarini, shrift o'lchamlarini va katakchalarni to'ldirishni boshqarishga yordam beradi.
Misol: jadvalning umumiy kengligiga asoslangan holda ustun kengliklari sozlanadigan jadval.
.data-table-container {
container-type: inline-size;
overflow-x: auto; /* Jadvallar uchun muhim */
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.table-header,
.table-cell {
padding: 1.5cqw;
font-size: 1.2cqw;
}
/* Muayyan ustunlarga nisbatan kengliklarni belgilash */
.column-name {
width: 25cqi; /* Jadval konteynerining satr o'lchamining 25% i */
}
.column-value {
width: 75cqi; /* Jadval konteynerining satr o'lchamining 75% i */
}
Ushbu misolda, to'ldirish, shrift o'lchamlari va ustun kengliklari .data-table-container ga nisbatan aniqlanadi. Konteyner torayganda yoki kengayganda, jadvalning ichki joylashuvi mutanosib ravishda sozlanadi, bu turli xil uzilish nuqtalarida va turli ma'lumot uzunliklariga duch kelishi mumkin bo'lgan turli mintaqalardagi foydalanuvchilar uchun uni yanada o'qishga qulayroq qiladi.
5. Vertikal yozish rejimlarni boshqarish
Vertikal yozish rejimlarni qo'llab-quvvatlaydigan ilovalar uchun (masalan, an'anaviy xitoy, yapon tili) cqi va cqb o'rtasidagi farq juda muhim bo'lib qoladi. Vertikal yozish rejimida satr o'qi vertikal, blok o'qi esa gorizontaldir.
Vertikal navigatsiya menyusini ko'rib chiqing:
body {
writing-mode: vertical-rl;
text-orientation: sideways;
}
.vertical-nav {
container-type: inline-size; /* Konteynerning satr o'lchami endi uning balandligi */
height: 100vh; /* Misol */
width: 100px; /* Misol */
}
.nav-item {
padding: 1cqi 2cqi; /* Konteynerning balandligiga nisbatan to'ldirish (satr o'lchami) */
margin-bottom: 1cqi; /* Konteynerning balandligiga nisbatan chekka */
}
.nav-icon {
width: auto; /* Avtomatik kenglik */
height: 3cqi; /* Ikonka balandligi konteynerning balandligi bilan o'lchanadi */
}
Ushbu sozlashda, 1cqi konteynerning balandligining 1% ini, 1cqw esa konteynerning kengligining 1% ini anglatadi. Bu uslub turli xil yozish rejimlaridan qat'i nazar, kontekstga muvofiqligini ta'minlaydi, bu esa global ilovalar uchun muhim afzallikdir.
Brauzer tomonidan qo'llab-quvvatlash va e'tiborga olinishi kerak bo'lgan masalalar
Container Queries, shu jumladan uzunlik birliklari nisbatan yangi, lekin keng tarqalgan brauzer tomonidan qo'llab-quvvatlashga ega bo'ldi. 2023 yil oxiri va 2024 yil boshidan boshlab, Chrome, Firefox, Safari va Edge kabi zamonaviy brauzerlar mukammal qo'llab-quvvatlashni taklif qilishadi.
Asosiy e'tiborga olinishi kerak bo'lgan masalalar:
- Brauzer mosligi: Har doim brauzer tomonidan qo'llab-quvvatlashning eng yangi ma'lumotlarini tekshiring. Container queries-ni qo'llab-quvvatlamaydigan eski brauzerlar uchun sizga JavaScript yoki oddiy CSS media query'larini o'z ichiga olgan fallback strategiyasi kerak bo'ladi.
container-typevacontainer-name: Container query birliklaridan foydalanish uchun ota-element konteyner kontekstini o'rnatishi kerak. Bu odatdacontainer-type: normal;(buinline-sizeni standart o'lcham o'qi sifatida anglatadi) yokicontainer-type: inline-size;yokicontainer-type: size;dan foydalanish orqali amalga oshiriladi. Shuningdek, siz muayyan ajdodlarni nishonga olish uchuncontainer-nameyordamida konteynerlarni nomlashingiz mumkin.- Ishlash: Umuman olganda, samarali bo'lsa-da, ortiqcha murakkab hisob-kitoblarga yoki dinamik o'lchamga tayanadigan juda ko'p elementlarga e'tibor bering. Ko'pgina tipik stsenariylarda, ishlash muammo emas.
- Fallback strategiyalari: Container query-ni qo'llab-quvvatlashni tekshirish va kerak bo'lganda muqobil uslublarni taqdim etish uchun
@supportsquery'laridan foydalaning.
.my-component {
/* Eski brauzerlar uchun fallback */
width: 100%;
padding: 15px; /* Qattiq to'ldirish */
font-size: 16px; /* Qattiq shrift hajmi */
}
@container (min-width: 500px) {
@supports (container-type: inline-size) {
.my-component {
/* Container query uslublari fallbacksni bekor qiladi */
padding: 2cqw;
font-size: 3cqw;
}
}
}
Container Queries uchun CSS ni tuzish
Keng tarqalgan naqsh ota-elementida konteyner kontekstini belgilash va keyin child elementlariga uslub berish uchun container query'laridan foydalanishdir.
Naqsh 1: Satr konteynerining o'lchamlari
Bu eng keng tarqalgan foydalanish holati, bu yerda komponentlar ularning kengligiga asoslanib moslashadi.
.component-wrapper {
container-type: inline-size;
width: 100%; /* Yoki har qanday boshqa kenglik */
}
.component-content {
font-size: 2cqw;
padding: 1cqw;
}
@container (max-width: 400px) {
.component-content {
font-size: 3cqw;
padding: 1.5cqw;
}
}
Naqsh 2: Blok konteyner o'lchamlari
Ular balandliklariga asoslangan holda moslashishi kerak bo'lgan elementlar uchun foydali, masalan, yopishqoq sarlavhalar yoki flex yoki grid joylashuvida qattiq balandlikdagi elementlar.
.vertical-spacer {
container-type: block-size;
height: 50vh;
}
.vertical-content {
margin-top: 5cqb;
}
Naqsh 3: Birlashtirilgan o'lchamlari (size yordamida)
Agar siz konteynerning ham kengligiga, ham balandligiga murojaat qilishingiz kerak bo'lsa, container-type: size; dan foydalaning.
.aspect-ratio-box {
container-type: size;
width: 100%;
height: 300px;
}
.inner-element {
width: 100%;
/* Konteynerning balandligini uning kengligining 50% ga teng qiling, uning balandligining 20% ga sozlandi */
height: calc(50cqw + 20cqb);
}
Oddiy masshtabdan tashqari: ilg'or usullar
Haqiqiy kuch container query birliklarini calc(), clamp() va media query'lari kabi boshqa CSS xususiyatlari bilan birlashtirganda paydo bo'ladi.
1. Konteyner birliklari bilan calc() dan foydalanish
Yanada nozik nazorat uchun konteyner birliklarini qattiq birliklar yoki boshqa nisbiy birliklar bilan birlashtiring.
Misol: minimal to'ldirishni saqlaydigan, lekin shrift o'lchamini masshtablaydigan tugma.
.action-button {
container-type: inline-size;
display: inline-block;
padding: 10px 2cqw; /* Qattiq vertikal to'ldirish, dinamik gorizontal to'ldirish */
font-size: clamp(14px, 2.5cqw, 20px); /* Shrift o'lchami 14px va 20px o'rtasida chegaralang */
}
2. Global komponentlar uchun moslashuvchan dizayn
Global auditoriya uchun komponentlarni loyihalashda, turli xil kontent uzunliklari, belgilar to'plamlari va hatto foydalanuvchi interfeysi afzalliklari komponentga qanday ta'sir qilishi mumkinligi haqida o'ylang. Container query'lari sizning ittifoqchingizdir.
- Ko'p tilli qo'llab-quvvatlash: Matn o'qilishi va komponentlar uzoqroq yoki qisqaroq tarjimalar bilan buzilmasligini ta'minlang.
- Foydalanish imkoniyati: Matn hajmi uchun foydalanuvchi afzalliklariga komponentlar kontekstual ravishda masshtablanganida yaxshiroq joylashtirilishi mumkin.
- Ishlashni optimallashtirish: Tasvirlar yoki murakkab grafikalar uchun container query'lari ularning ajratilgan maydonga haddan tashqari yuklash yoki joylashuv o'zgarishlarisiz mos kelishini ta'minlashga yordam beradi.
Xulosa
CSS Container Query uzunlik birliklari - cqw, cqh, cqi va cqb - moslashuvchan veb-dizaynda muhim siljishni ifodalaydi. Elementga nisbatan birliklarni hisoblashni yoqish orqali ular ishlab chiquvchilarga global viewport o'rniga o'zlarining maxsus joylashuv kontekstiga aqlli tarzda ta'sir ko'rsatadigan yuqori moslashuvchan komponentlarni yaratishga imkon beradi.
Global veb-ishlab chiqish uchun bu birliklar ajralmasdir. Ular turli tillarda yanada mustahkam shriftni masshtablash, ichki joylashuvlarda moslashuvchan oraliq sozlash va turli xil yozish rejimlarini hurmat qilgan holda, ommaviy axborot vositalari uchun izchil aspekt nisbatlarini ta'minlaydi. Container query'larini va ularning tegishli uzunlik birliklarini qabul qilish butun dunyo bo'ylab tomoshabinlar uchun yanada chidamli, xizmat ko'rsatishga yaroqli va foydalanuvchilarga qulay interfeyslarga olib keladi.
Ushbu birliklar bilan keyingi loyihangizda tajriba o'tkazishni boshlang. Siz moslashuvchan dizayn ish oqimlarida nazoratning yangi darajasini ochishingizni, veb-saytlaringizni dunyoning istalgan joyidagi har qanday konteynerga haqiqatan ham moslashtirishni topasiz.